<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        实例内容
        <parent-com :mydata="message" :num="5"></parent-com>
    </div>
    <template id="ParentCom">
        <div>
            <h1>我是父组件{{mydata}}{{num}}</h1>
            <button @click="changemydata">点击我修改mydata数据</button>
            <child-com :mystr="mydata"></child-com>
        </div>
    </template>
    <template id="ChildCom">
        <div>
            <h1>我是子组件{{mystr}}</h1>
        </div>
    </template>
    <script>
        // 一、父传子 ：属性传参 ，通过props接收
        let ChildCom = {
            props:['mystr'],
            template:"#ChildCom",
            data:function(){
                return {
                    message:"子组件数据"
                }
            }
        }

        let ParentCom = {
            // props:['mydata'],   // 1.props是只读属性 2.props 可以是对象
            // 3.数字类型
            props:{
                mydata:{
                    type:String,  //限制 属性的类型
                    // required:true,  // 属性是否必须
                    default:"默认值"  // 属性的默认值
                },
                num:{
                    type:Number
                }
            },
            template:"#ParentCom",
            components:{
                ChildCom
            },
            data:function(){
                return {
                    message:"父组件数据",
                    mydata2:this.mydata
                }
            },
            methods:{
                changemydata(){
                    console.log( this.mydata2)
                    // this.mydata = "123";
                }
            }
        }

        // 组件的通信
        new Vue({
            el:"#app",
            components:{
                ParentCom
            },
            data:{
                message:"实例数据"
            }
        })
    </script>
</body>
</html>